<!-- 这段 HTML 代码是一个现代 Web 应用的基础模板，通常作为前端框架（如 Vue、React）的入口文件。
它包含了必要的元数据配置、动态 viewport 适配以及应用挂载点， -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      // 检测浏览器是否支持viewport-fit属性(用于适配iPhone异形屏)
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      
      // 动态写入viewport元标签，根据检测结果决定是否添加viewport-fit=cover
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <!--preload-links--> <!-- 预加载资源占位符，构建工具会在此处插入预加载链接 -->
    <!--app-context--> <!-- 应用上下文信息占位符，构建工具会在此处插入环境变量等信息 -->
  </head>
  <body>
    <div id="app"><!--app-html--></div> <!-- Vue/React等前端框架的根节点，应用内容将被渲染到此处 -->
    <script type="module" src="/main.js"></script> <!-- 引入应用的主入口脚本，使用ES模块规范 -->
  </body>
</html>